<!-- isCheckList:选择的标签数组，最少包含id  和 label
 checkId:  当前选中的标签id,传数组多选，字符串或者数字单选
 treePropsObj:默认.{ children: 'children', hasChildren: true, id: 'id', label: 'label' }
      children:'子集key',hasChildren:'是否有子集'，id:需要选中的idkey，label:'需要展示的文字'

  @checkId父级暴露的方法val为传出去的id
  -->
<template>
  <div>
    <div style="width: 100%;min-height: 30px;">
      <template v-for="(item, index) in isCheckList">
        <van-tag closeable size="medium" type="primary" @close="deleteTag(item, index)">
          {{ item[treeProps.label] }}
        </van-tag>
      </template>

    </div>
    <van-popup get-container="#app" v-model="showMobilePop" position="right" :style="{ height: '100%', width: '80%' }"
      @close="showMobilePop = false">
      <div class="container">
        <div class="header">
          <div style="padding-bottom: 10px;">
            <van-field :border="true" v-model="searchKeyword" placeholder="请输入" left-icon="search" />
          </div>
        </div>
        <div class="main">
          <div class="list_container">
            <span v-for="item in filtereList" class="item" @click="checkItem(item)">
              <i>{{ item[treeProps.label] }}</i>
              <i><van-icon v-if="(isCheckList.map(ite => ite[treeProps.id])).includes(item[treeProps.id])"
                  name="success" color="blue" /></i></span>
          </div>
        </div>

      </div>
    </van-popup>
  </div>

</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
      required: true
    },
    checkId: { default: () => '', required: true },
    treePropsObj: {
      type: Object,
    }
  },
  watch: {
    checkId: {
      handler(newVal) {
        // 处理 checkId 变化
        if (Array.isArray(newVal)) {
          this.isCheckMore = true
          this.isCheckList = this.newList.filter(item => newVal.includes(item[this.treeProps.id]))
        } else {
          // 不是数组
          this.isCheckList = this.newList.filter(item => [newVal].includes(item[this.treeProps.id]))
        }
      },
      immediated: true
    },
    list: {
      handler(val) {
        // 判断选择的
        if (this.treeProps.hasChildren) {
          this.flattenLastLevel(this.list)
        } else {
          this.newList = val
        }
      },
      immediated: true,
      deep: true,
    },
  },
  computed: {
    filtereList() {
      if (!this.searchKeyword.trim()) {
        return this.newList;
      }
      const keyword = this.searchKeyword.toLowerCase();
      return this.newList.filter(item =>
        item[this.treeProps.label].toLowerCase().includes(keyword)
      );
    },
    treeProps() {
      return { ...{ children: 'children', hasChildren: true, id: 'id', label: 'label' }, ...this.treePropsObj, }
    }
  },

  data() {
    return {
      newList: [],
      isCheckList: [],
      isCheckMore: false,//判断是否是多选
      showMobilePop: false,
      searchKeyword: '',

    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    openPop() {
      this.showMobilePop = true
    },
    // 删除
    deleteTag(item, index) {
      this.isCheckList.splice(index, 1);
      if (this.isCheckMore) {
        let ids = this.isCheckList.map(ite => ite[this.treeProps.id])
        this.$emit('update:checkId', ids);
      } else {
        this.$emit('update:checkId', this.isCheckList[this.treeProps.id]);
      }
    },
    // 树形解构最后一层
    flattenLastLevel(tree) {
      let result = [];
      const traverse = (node) => {
        if (!node[this.treeProps.children] || node[this.treeProps.children].length === 0) {
          result.push(node);
        } else {
          node[this.treeProps.children].forEach(traverse);
        }
      }
      tree.forEach(traverse); // 处理根节点数组
      this.newList = result;

    },
    checkItem(item) {
      if (this.isCheckMore) {
        if ((this.isCheckList.map(ite => ite[this.treeProps.id])).includes(item[this.treeProps.id])) {
          // 如果已经存在，则从数组中移除
          this.isCheckList = this.isCheckList.filter(item2 => item2[this.treeProps.id] != item[this.treeProps.id]);
        } else {
          // 如果不存在，则添加到数组中
          this.isCheckList.push(item);
        }
        let ids = this.isCheckList.map(ite => ite[this.treeProps.id])
        // 多选逻辑
        this.$emit('update:checkId', ids);
      } else {
        // 单选逻辑
        this.isCheckList = [item]
        this.$emit('update:checkId', item[this.treeProps.id]);
      }
    }
  },
}
</script>
<style scoped lang='scss'>
::v-deep .van-cell {
  border: 1px solid #ebedf0;
  border-radius: 15px;
}

::v-deep .van-tag {
  &:nth-child(n+2) {
    margin-left: 10px;
  }
}

.container {
  padding: 45px 20px 0 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .header {
    height: 64px;
  }

  .main {
    height: calc(100% - 70px);
    overflow-y: scroll;

    .list_container {
      display: flex;
      flex-direction: column;


      .item {
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2px;
        border-bottom: 1px solid #ebedf0;
      }
    }


  }

  .footer {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  i {
    font-style: normal;
  }
}
</style>
